<template>
    <div>
        <!-- :close-on-press-escape="false" -->
        <el-drawer title="预发布查看" :visible.sync="drawerState" custom-class="drawer_class" 
            :before-close="handleClose" direction="ltr">
            <div class="product_drawer_class">
                <div style="padding: 20px; padding-left: 40px;background-color: #f9f9f9; color:#6c757d; border-radius: 3px;font-size: 20px;letter-spacing: 0.3px;">
                        预发布数据仅做参考使用,实际请以最终商品发布的数据为准!
                </div>
                <div>
                    <h4>{{ productInfo.productData.productName }}</h4>
                    <div class="product_img">
                        <img :src="currentImgUrl" alt="" width="400" height="400">
                        <p style="color: coral;font-weight: bold;font-size: 17px;"> {{ currentImgName }} </p>
                    </div>
                    <div class="product_options">
                        <h5>规格1</h5>
                        <el-radio-group v-model="productOptionsValue">
                            <el-radio-button v-for="item in productInfo.options" :label="item.id">{{ item.specName
                                }}</el-radio-button>
                        </el-radio-group>
                    </div>
                </div>
                <div>
                    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
                        <el-menu-item index="1">主图1：1
                            <span style="color: #fff; background-color: #1890ff; padding: 0px 5px;">{{ productInfo.mainPictures.length || 0 }}</span>
                        </el-menu-item>
                    </el-menu>
                    <div class="main_pictures">
                        <span v-for="(item, index) in productInfo.mainPictures" :key="index" @click="picturesClick(item)">
                            <img :src="item.imageUrl" alt="" width="65" height="65">
                        </span>
                    </div>
                </div>
                <div>
                    <h4>详情图</h4>
                    <div style="width: 800px; margin: 0 auto;">
                        <img :src="item.imageUrl" alt="" v-for="(item, index) in productInfo.details">
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { getProductGoodsData } from "@/api/product/productInfo";
export default {
    props: {
        productId: {
            type: Number,
            default: ''
        }
    },
    data() {
        return {
            activeIndex: '1',
            pActive: '-1',
            drawerState: true,
            total: 0,
            productOptionsValue: '',
            currentImgUrl: '',
            currentImgName: '',
            productInfo: {
                mainPictures: [],
            }
        }
    },
    watch: {
        productOptionsValue(val) {
            if (val) {
                const curItem = this.productInfo.options.filter(item => item.id == val)[0]
                this.currentImgUrl = curItem.imageUrl
                this.currentImgName = curItem.specName
            }
        }
    },
    mounted() {
        this.getProductGoodsData()
    },
    methods: {
        getProductGoodsData() {
            getProductGoodsData(this.productId).then(res => {
                this.productInfo = res.value
                this.productOptionsValue = res.value.options[0].id
                this.currentImgUrl = res.value.options[0].imageUrl
                this.currentImgName = res.value.options[0].specName
            })
        },
        handleSelect(val) {
            console.log('val', val);
        },
        picturesClick(scope) {
            console.log('scope', scope);
            this.currentImgUrl = scope.imageUrl
            this.currentImgName = scope.imageName
        },
        handleClose(done) {
            // done();
            this.$emit('close')
        }
    }
}
</script>

<style lang="scss" scope>
.drawer_class {
    width: 70% !important;
    padding: 20px;
}
.product_drawer_class{
    h4{
        color: #6c757d;
        font-size: 22px;

    }
}

.product_img {
    display: inline-block;
    width: 400px;
    margin-right: 20px;
}

.product_options {
    display: inline-block;
    width: calc(100% - 420px);
    vertical-align: top;
}
.main_pictures{
    padding: 20px 0;
    span{
        margin-right: 10px;
        display: inline-block;
        border-radius: 10px;
        cursor: pointer;
        &.active{
            border: 1px solid #1890ff;
        }
    }
}
</style>